// 模拟API数据
const API_BASE = "http://127.0.0.1:8088/api";

const mockApi = {
  getArticles: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          articles: [
            {
              id: 1,
              title: "深入理解JavaScript闭包",
              excerpt:
                "闭包是JavaScript中一个强大且常被误解的概念。本文将深入探讨闭包的工作原理、应用场景以及常见误区。",
              image: "linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)",
              date: "2023-10-15",
              author: "张明",
              authorAvatar: "ZM",
              readTime: "8分钟",
              tags: ["JavaScript", "前端", "闭包"],
              category: "前端技术",
              views: 1245,
            },
            {
              id: 2,
              title: "React Hooks最佳实践",
              excerpt:
                "Hooks彻底改变了React组件的编写方式。本文分享在使用Hooks时的最佳实践和常见陷阱，帮助你编写更健壮的组件。",
              image: "linear-gradient(135deg, #00c6fb 0%, #005bea 100%)",
              date: "2023-10-10",
              author: "李华",
              authorAvatar: "LH",
              readTime: "12分钟",
              tags: ["React", "Hooks", "前端"],
              category: "前端技术",
              views: 987,
            },
            {
              id: 3,
              title: "Node.js性能优化指南",
              excerpt:
                "Node.js以其高性能著称，但不当使用仍会导致性能问题。本文将介绍Node.js应用性能优化的关键策略和工具。",
              image: "linear-gradient(135deg, #0ba360 0%, #3cba92 100%)",
              date: "2023-10-05",
              author: "王涛",
              authorAvatar: "WT",
              readTime: "15分钟",
              tags: ["Node.js", "后端", "性能优化"],
              category: "后端开发",
              views: 1562,
            },
            {
              id: 4,
              title: "深入理解CSS Grid布局",
              excerpt:
                "CSS Grid布局是现代Web布局的终极解决方案。本文通过实例详细讲解Grid布局的核心概念和高级技巧。",
              image: "linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)",
              date: "2023-09-28",
              author: "陈静",
              authorAvatar: "CJ",
              readTime: "10分钟",
              tags: ["CSS", "前端", "布局"],
              category: "前端技术",
              views: 876,
            },
            {
              id: 5,
              title: "Docker容器化部署实践",
              excerpt:
                "Docker彻底改变了应用的部署方式。本文分享如何将Node.js应用容器化并部署到生产环境的完整流程。",
              image: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
              date: "2023-09-20",
              author: "赵强",
              authorAvatar: "ZQ",
              readTime: "14分钟",
              tags: ["Docker", "DevOps", "部署"],
              category: "后端开发",
              views: 1342,
            },
          ],
          categories: [
            { name: "前端技术", count: 12 },
            { name: "后端开发", count: 8 },
            { name: "数据结构", count: 5 },
            { name: "算法", count: 7 },
            { name: "数据库", count: 6 },
            { name: "DevOps", count: 4 },
            { name: "生活感悟", count: 9 },
          ],
          popularPosts: [
            {
              id: 6,
              title: "TypeScript高级类型技巧",
              image: "linear-gradient(135deg, #654ea3 0%, #da98b4 100%)",
              date: "2023-09-15",
              views: 2103,
            },
            {
              id: 7,
              title: "Webpack 5配置完全指南",
              image: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
              date: "2023-09-10",
              views: 1876,
            },
            {
              id: 8,
              title: "RESTful API设计最佳实践",
              image: "linear-gradient(135deg, #5ee7df 0%, #b490ca 100%)",
              date: "2023-09-05",
              views: 1654,
            },
          ],
          tags: [
            "JavaScript",
            "React",
            "Node.js",
            "CSS",
            "Vue",
            "TypeScript",
            "Docker",
            "Webpack",
            "算法",
            "数据库",
            "Linux",
            "Git",
          ],
        });
      }, 800); // 模拟网络延迟
    });
  },

  getArticleDetail: (id) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const articles = [
          {
            id: 1,
            title: "深入理解JavaScript闭包",
            content: `
                            <p>闭包是JavaScript中一个强大且常被误解的概念。理解闭包对于掌握JavaScript至关重要，因为它是许多高级编程模式的基础。</p>
                            
                            <h2>什么是闭包？</h2>
                            <p>简单来说，闭包是指那些能够访问自由变量的函数。自由变量是指在函数中使用的，但既不是函数参数也不是函数局部变量的变量。</p>
                            
                            <blockquote>
                                闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。
                            </blockquote>
                            
                            <h2>闭包的工作原理</h2>
                            <p>要理解闭包，首先需要理解JavaScript的作用域链机制。当函数执行时，会创建一个执行环境（execution context），其中包含一个作用域链。作用域链的前端是当前函数的活动对象，下一个变量对象来自包含（外部）函数，再下一个来自更外层的函数，直到全局执行环境。</p>
                            
                            <p>闭包的神奇之处在于，即使外部函数已经执行完毕，闭包仍然可以访问外部函数的变量。这是因为闭包的作用域链包含了外部函数的活动对象。</p>
                            
                            <h2>闭包的实际应用</h2>
                            <p>闭包在JavaScript中有多种实际应用：</p>
                            
                            <ul>
                                <li><strong>数据封装和私有变量</strong>：通过闭包可以创建私有变量，这是模块模式的基础</li>
                                <li><strong>函数工厂</strong>：创建配置不同但逻辑相似的函数</li>
                                <li><strong>事件处理和回调</strong>：在异步编程中保存上下文</li>
                                <li><strong>函数柯里化</strong>：将多参数函数转换为单参数函数序列</li>
                                <li><strong>Memoization</strong>：缓存函数计算结果以提高性能</li>
                            </ul>
                            
                            <h2>闭包的常见误区</h2>
                            <p>在使用闭包时，开发者常会遇到以下问题：</p>
                            
                            <ol>
                                <li><strong>意外的变量捕获</strong>：在循环中创建闭包时，可能捕获到循环变量的最终值而非每次迭代的值</li>
                                <li><strong>内存泄漏</strong>：不当使用闭包可能导致内存无法释放，尤其是涉及DOM元素时</li>
                                <li><strong>性能问题</strong>：过度使用闭包可能影响性能，因为闭包的作用域链较长</li>
                            </ol>
                            
                            <p>理解闭包是成为JavaScript高级开发者的关键一步。通过合理使用闭包，可以编写出更优雅、更模块化的代码。</p>
                        `,
            image: "linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)",
            date: "2023-10-15",
            author: "张明",
            authorAvatar: "ZM",
            readTime: "8分钟",
            tags: ["JavaScript", "前端", "闭包"],
            category: "前端技术",
            views: 1245,
          },
        ];

        resolve(articles.find((article) => article.id === id));
      }, 800); // 模拟网络延迟
    });
  },

  getArticlesV1: async () => {
    const response = await fetch(`${API_BASE}/posts`);
    if (!response.ok) {
      throw new Error("网络错误，无法获取文章列表");
    }
    return response.json();
  },

  getArticleDetailV1: async (id) => {
    const response = await fetch(`${API_BASE}/posts/${id}`);
    return response.json();
  },

  getTags: async () => {
    const response = await fetch(`${API_BASE}/tags`);
    return response.json();
  },
  getCategories: async () => {
    const response = await fetch(`${API_BASE}/popularCategories`);
    return response.json();
  },
};

// 导出API方法
export { mockApi };
